<template>
  <div class="week_board" v-if="weekData.length > 0">
    <div class="week_board_left" ref="leftNewsDiv">
      <div class="week_board_left-1">
        <div v-for="(item, index) in weekData" :key="item.id">
          <div class="week_board_left_title" :ref="item.id" :id="item.id" @click="goWrite(item)">
            <p class="week_board_left_title-1">
              {{ item.title }}{{ item.timeFrame }}
              <!-- 判断是否是自己如果是自己的话不会存在催报退回按钮 -->
              <template v-if="userId !== userInfo.userId">
                <span
                  class="warn_week"
                  v-if="item.isUrge == '1' && recordType !== '01-05'"
                  @click.stop="reminder(item, index)">
                  催报
                </span>
                <span class="warn_cui" v-if="item.isUrge == '2' && recordType !== '01-05'">已催报</span>
                <span
                  class="warn_week"
                  v-if="item.isReturn == '1' && item.saveStatus == '1'"
                  @click.stop="weekBack(item, index)">
                  退回
                </span>
                <span
                  class="warn_week"
                  v-if="
                    item.isSuggest == '1' && item.saveStatus == '1' && ['01-01', '01-02', '01-03'].includes(recordType)
                  "
                  @click="weekReply(item, index)">
                  纪实回复
                </span>
              </template>
              <span
                class="warn_week"
                @click="importYear(item.id)"
                v-if="recordType === '01-05' && item.saveStatus == '1'">
                下载年度考核登记表
              </span>
            </p>
            <span class="no_complete" v-if="item.saveStatus === '0'">
              {{ userId === userInfo.userId ? '去填写' : '未完成' }}
            </span>
            <span v-if="item.saveStatus === '2'">
              <!-- <span class="no_complete">已退回</span> -->
              <span class="review_complete">{{ userId === userInfo.userId ? '重新填报' : '未完成' }}</span>
            </span>
            <span class="week_board_left_title-2" v-if="item.saveStatus == '1'" @click.stop="cliOpen(item, index)">
              {{ item.isOpen ? '收起' : '展开' }}
            </span>
          </div>
          <table class="week_look_table" v-if="item.isOpen">
            <tr v-if="recordType == '01-01' || recordType == '01-02'">
              <th>{{ recordType == '01-01' ? '本周工作纪实' : '本月工作小结' }}</th>
              <td>
                <div class="one_week" v-for="(oneweek, index) in item.nowNoteRelContentVOs" :key="index">
                  <span>{{ index + 1 }}</span>
                  <div class="one_week_content2">{{ oneweek.workContent }}</div>
                  <div class="one_week_content1" v-if="oneweek.workTag">，{{ oneweek.workTag }}</div>
                  <div class="one_week_content3" v-if="oneweek.finishStatus">
                    ，{{ oneweek.finishStatus == '1' ? '已完成' : '进行中' }}
                  </div>
                  <div v-if="oneweek.finishPercent">，完成量：{{ oneweek.finishPercent }}</div>
                  <div class="one_week_content4" v-if="oneweek.workClassifyName">({{ oneweek.workClassifyName }})</div>
                </div>
                <div class="pre_line" v-html="removeHtmlStyle(item.workCon)"></div>
              </td>
            </tr>
            <tr v-for="(list, index) in item.dataDetail" :key="index">
              <th>{{ list.title }}</th>
              <td v-html="removeHtmlStyle(list.entryCont)"></td>
            </tr>
            <tr v-if="recordType == '01-01' || recordType == '01-02'">
              <th>{{ recordType == '01-01' ? '下周工作计划' : '下月工作计划' }}</th>
              <td>
                <div class="one_week" v-for="(oneweek, index) in item.planNoteRelContentVOs" :key="index">
                  <span>{{ index + 1 }}</span>
                  <div class="one_week_content2">{{ oneweek.workContent }}</div>
                  <div class="one_week_content1" v-if="oneweek.workTag">，{{ oneweek.workTag }}</div>
                  <div class="one_week_content4" v-if="oneweek.workClassifyName">({{ oneweek.workClassifyName }})</div>
                </div>
                <div class="pre_line" v-html="removeHtmlStyle(item.planCon)"></div>
              </td>
            </tr>

            <tr v-if="recordType !== '01-05'">
              <th>问题建议</th>
              <td>
                <div class="week_look_table_td" v-for="sugg in item.proConList" :key="sugg.id">
                  <div class="attract_share_content" v-html="removeHtmlStyle(sugg.proCon)"></div>
                  <div class="mar_upload" v-if="sugg.proFileList.length > 0">
                    <UploadPreview :fileList="sugg.proFileList" :type="2" />
                  </div>
                </div>
              </td>
            </tr>
            <tr v-if="recordType !== '01-05'">
              <th>图片/视频/附件</th>
              <td>
                <UploadPreview :fileList="item.recordFileList" type="2"></UploadPreview>
              </td>
            </tr>
            <tr v-if="item.suggest">
              <th>纪实回复</th>
              <td v-html="removeHtmlStyle(item.suggest)"></td>
            </tr>
            <tr v-if="recordType === '01-05'">
              <th>年度工作总结</th>
              <td>
                <div class="pre_line" v-html="removeHtmlStyle(item.workCon)"></div>
              </td>
            </tr>
            <tr v-if="recordType === '01-05'">
              <th>参加脱产培训情况</th>
              <td>
                <div class="pre_line" v-html="removeHtmlStyle(item.offJt)"></div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <el-scrollbar class="week_board_right">
      <div class="week_board_right_one" v-for="(item, index) in weekData" :key="index" @click="rightCli(item, index)">
        <div class="right_one_line">
          <div class="board_right_one_line"></div>
          <div :class="{ circel_right: item.id == id }"></div>
        </div>
        <div class="board_right_one_name" :class="item.id == id ? 'right_name1' : 'right_name2'">
          <div>{{ item.title }}</div>
          <div>{{ item.timeFrame }}</div>
        </div>
      </div>
    </el-scrollbar>

    <XnDialog custom-class="branch_dialog" :title="diaTitle" :visible.sync="returnShow" @close="returnShow = false">
      <el-input
        placeholder="请输入"
        type="textarea"
        v-model="desc"
        size="small"
        :rows="8"
        maxlength="128"
        show-word-limit></el-input>
      <div class="dialog-box_bottom">
        <el-button size="small" @click="returnShow = false">取 消</el-button>
        <el-button type="primary" size="small" @click="setData">确定</el-button>
      </div>
    </XnDialog>
  </div>
  <div class="week_board" v-else>
    <Empty>
      <slot>暂无数据</slot>
    </Empty>
  </div>
</template>

<script>
import {
  getRecordDetailByPeriod,
  getWeekRecordForm,
  getMonthRecordForm,
  exportYearRecord,
  getYearRecordForm,
  saveReturn,
  saveSuggest,
} from '@apis/board.js'
import { saveUrgeByNeedDeal } from '@api/modules/evaluation.js'
import UploadPreview from '@com/UploadPreview/index.vue'
import XnDialog from '@com/xnDialog.vue'
export default {
  components: {
    UploadPreview,
    XnDialog,
  },
  props: {
    weekList: {
      type: Array,
      default() {
        return []
      },
    },
    recordType: {
      type: String,
      default: '',
    },
    userId: {
      type: String,
      default: '',
    },
  },

  data() {
    return {
      id: '1', // 选中id
      topOne: 100, // 第一个数据高度
      tabClick: false,
      userInfo: JSON.parse(localStorage.PSKH_USERINFO),

      diaTitle: '',
      returnShow: false,
      desc: '', // 意见建议
      returnType: '',
      oneItem: '',
      oneIndex: 0,
      weekData: [],
    }
  },
  watch: {
    weekList: {
      handler(news) {
        this.weekData = news
      },
      deep: true,
    },
  },
  created() {},
  mounted() {
    this.weekData = this.weekList
    this.getPageData()
  },

  methods: {
    removeHtmlStyle(html) {
      const rel = /style\s*?=\s*?([‘"])[\s\S]*?\1/g
      let newHtml = ''
      if (html) {
        newHtml = html.replace(rel, '')
      }
      return newHtml
    },
    getPageData() {
      if (this.weekData.length > 0) {
        this.$nextTick(() => {
          this.topOne = document.getElementById(this.weekData[0].id).offsetTop
        })
        for (const i in this.weekData) {
          this.id = this.weekData[i].id
          if (this.weekData[i].isOpen) {
            if (['01-03'].includes(this.recordType)) {
              this.getJInit(this.id, i)
            } else if (this.recordType === '01-01') {
              this.getZInit(this.id, i)
            } else if (this.recordType === '01-02') {
              this.getYInit(this.id, i)
            } else if (this.recordType === '01-05') {
              this.getNInit(this.id, i)
            }
            return
          }
        }
      }
    },
    goWrite(item) {
      const urlArr = item.url.split('?')
      const str = urlArr[0].slice(1)

      if (this.userId === localStorage.pskh_userId) {
        if (item.saveStatus === '0') {
          const urlStr = item.url.replace(str, 'document/index-write')
          this.$router.push(urlStr)
        } else if (item.saveStatus === '2') {
          const urlStr = item.url.replace(str, 'document/index-detail')
          this.$router.push(urlStr)
        }
      }
    },
    // 展开收起
    cliOpen(item, index) {
      this.weekData[index].isOpen = !this.weekData[index].isOpen
      if (item.isOpen) {
        this.rightCli(item, index)
      }
    },
    // 周月
    getZInit(id, index) {
      getWeekRecordForm({
        id: id,
        optionUserId: localStorage.pskh_userId,
        tenantId: localStorage.pskh_tenantId,
      }).then(res => {
        const data = res.data
        this.weekData[index].dataDetail = []
        this.weekData[index].suggest = data.suggest || ''
        if (data.formV1VO) {
          this.weekData[index].workCon = data.formV1VO.workCon
          this.weekData[index].planCon = data.formV1VO.planCon
          this.weekData[index].recordFileList = data.formV1VO.recordFileList
          this.weekData[index].proConList = data.formV1VO.proConList
        }
        if (data.formV2VO) {
          if (data.formV2VO.workConList && data.formV2VO.workConList.length) {
            this.weekData[index].nowNoteRelContentVOs = data.formV2VO.workConList.filter(item => {
              return item.workContent
            })
          }
          if (data.formV2VO.planConList && data.formV2VO.planConList.length) {
            this.weekData[index].planNoteRelContentVOs = data.formV2VO.planConList.filter(item => {
              return item.workContent
            })
          }
          if (!this.weekData[index].recordFileList.length) {
            this.weekData[index].recordFileList = data.formV2VO.recordFileList
          }
          if (!this.weekData[index].proConList.length) {
            this.weekData[index].proConList = data.formV2VO.proConList
          }
        }
      })
    },
    // 周月
    getYInit(id, index) {
      getMonthRecordForm({
        id: id,
        optionUserId: localStorage.pskh_userId,
        tenantId: localStorage.pskh_tenantId,
      }).then(res => {
        const data = res.data
        this.weekData[index].suggest = data.suggest || ''
        this.weekData[index].dataDetail = [
          {
            title: '政治表现及政治学习情况',
            entryCont: data.formV1VO.politicsCon || '',
          },
          {
            title: '工作亮点及创新情况',
            entryCont: data.formV1VO.innovateCon || '',
          },
          {
            title: '主要不足及具体事例',
            entryCont: data.formV1VO.lackCon || '',
          },
          {
            title: '奖惩情况',
            entryCont: data.formV1VO.rpCon || '',
          },
        ]
        if (data.formV1VO) {
          this.weekData[index].workCon = data.formV1VO.workCon
          this.weekData[index].planCon = data.formV1VO.planCon
          this.weekData[index].recordFileList = data.formV1VO.recordFileList
          this.weekData[index].proConList = data.formV1VO.proConList
        }
        if (data.formV2VO) {
          if (data.formV2VO.workConList && data.formV2VO.workConList.length) {
            this.weekData[index].nowNoteRelContentVOs = data.formV2VO.workConList.filter(item => {
              return item.workContent
            })
          }
          if (data.formV2VO.planConList && data.formV2VO.planConList.length) {
            this.weekData[index].planNoteRelContentVOs = data.formV2VO.planConList.filter(item => {
              return item.workContent
            })
          }
          if (!this.weekData[index].recordFileList.length) {
            this.weekData[index].recordFileList = data.formV2VO.recordFileList
          }
          if (!this.weekData[index].proConList.length) {
            this.weekData[index].proConList = data.formV2VO.proConList
          }
        }
      })
    },
    // 季度
    getJInit(id, index) {
      getRecordDetailByPeriod({
        id: id,
        optionUserId: localStorage.pskh_userId,
        tenantId: localStorage.pskh_tenantId,
      }).then(res => {
        const data = res.data
        this.weekData[index].suggest = data.suggest || ''
        this.weekData[index].dataDetail = [
          {
            title: '本季度个人总结',
            entryCont: '',
            audioList: [],
            id: 'workCon',
            required: true,
            placeholder: '请输入本季度个人总结',
            minRows: 5,
          },
          {
            title: '教育培训情况',
            entryCont: '',
            id: 'eduCon',
            audioList: [],
            placeholder: '请输入教育培训情况',
          },
          {
            title: '奖惩情况',
            entryCont: '',
            id: 'rpCon',
            audioList: [],
            placeholder: '请输入奖惩情况',
          },
        ]
        this.weekData[index].dataDetail.forEach(item => {
          item.entryCont = data[item.id]
        })
        this.weekData[index].recordFileList = data.recordFileList
        this.weekData[index].proConList = data.proConList || []
      })
    },
    rightCli(item, index) {
      this.tabClick = true
      for (const i in this.weekData) {
        this.weekData[i].isOpen = false
      }
      setTimeout(() => {
        this.tabClick = false
      }, 3000)
      if (this.weekData[index].saveStatus === '1') {
        this.weekData[index].isOpen = true
        if (this.recordType === '01-03') {
          this.getJInit(item.id, index)
        } else if (this.recordType === '01-02') {
          this.getYInit(item.id, index)
        } else if (this.recordType === '01-01') {
          this.getZInit(item.id, index)
        }
      }
      this.id = item.id
      const topMove = 52 * index
      const material = this.$refs.leftNewsDiv
      this.$nextTick(() => {
        material.scrollTo({
          top: topMove,
          behavior: 'smooth',
        })
      })
    },
    handleScroll() {
      if (!this.tabClick) {
        for (const i in this.weekData) {
          const scrollTop = this.$refs.leftNewsDiv.scrollTop
          const id = this.weekData[i].id
          if (scrollTop >= document.getElementById(id).offsetTop - this.topOne) {
            this.id = id
          }
        }
      }
    },

    // 催报
    reminder(item, index) {
      this.oneIndex = index
      this.$confirm('确定进行催报?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.urgeQuart(item, index)
        })
        .catch(() => {})
    },

    urgeQuart(item, index) {
      saveUrgeByNeedDeal({
        type: 1,
        needId: item.id,
        urgeUserId: this.userId,
        optionUserId: localStorage.pskh_userId,
        tenantId: localStorage.pskh_tenantId,
      }).then(res => {
        if (res.status === 200) {
          this.$message({
            message: '催报成功',
            type: 'success',
          })
          item.isUrge = '2'
        }
      })
    },

    // 退回
    weekBack(item, index) {
      this.oneIndex = index
      this.oneItem = item
      this.returnShow = true
      this.id = item.id
      this.diaTitle = '退回原因'
      this.returnType = '1'
      this.desc = ''
    },
    // 纪实回复
    weekReply(item, index) {
      this.oneIndex = index
      this.oneItem = item
      this.returnShow = true
      this.diaTitle = '纪实回复'
      this.id = item.id
      this.returnType = '2'
      this.desc = ''
    },
    setData() {
      if (this.returnType === '1') {
        this.returnBoard()
      } else if (this.returnType === '2') {
        this.suggBoard()
      }
    },

    importYear(id) {
      const req = `?noteId=${id}`
      const link = document.createElement('a')
      link.href = exportYearRecord(req)
      link.target = 'targetName'
      link.click()
      console.log(link.href)
      link.remove()
    },
    getNInit(id, index) {
      getYearRecordForm({
        id: id,
      }).then(res => {
        const data = res.data
        this.weekData[index].suggest = data.suggest || ''

        this.$set(this.weekList[index], 'workCon', res.data.yearRecord)
        this.$set(this.weekList[index], 'offJt', res.data.offJt)
      })
    },
    returnBoard() {
      saveReturn({
        noteId: this.id,
        optionUserId: localStorage.pskh_userId,
        replayContent: this.desc,
        tenantId: localStorage.pskh_tenantId,
        suggestionList: [],
      }).then(res => {
        if (res.code === 0) {
          this.$message({
            message: '退回成功',
            type: 'success',
          })
          this.returnShow = false
          this.weekData[this.oneIndex].isReturn = '0'
          this.weekData[this.oneIndex].isSuggest = '0'
          this.weekData[this.oneIndex].saveStatus = '2'
          this.weekData[this.oneIndex].isOpen = false
        }
      })
    },
    suggBoard() {
      saveSuggest({
        noteId: this.id,
        optionUserId: localStorage.pskh_userId,
        replayContent: this.desc,
        tenantId: localStorage.pskh_tenantId,
        suggestionList: [],
      }).then(res => {
        if (res.code === 0) {
          this.$message({
            message: '提交成功',
            type: 'success',
          })
          this.returnShow = false
          this.weekData[this.oneIndex].isReturn = '0'
          this.weekData[this.oneIndex].isSuggest = '0'
          this.weekData[this.oneIndex].saveStatus = '1'
          if (this.recordType === '01-02') {
            this.getYInit(this.id, this.oneIndex)
          } else if (this.recordType === '01-01') {
            this.getZInit(this.id, this.oneIndex)
          } else if (this.recordType === '01-03') {
            this.getJInit(this.id, this.oneIndex)
          }
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.week_board {
  height: 100%;
  display: flex;
  flex-direction: row;
  .week_board_right {
    width: 170px;
    height: 100%;
    /deep/ .el-scrollbar__wrap {
      padding: 30px 0px 10px 20px;
    }
  }
  .week_board_left {
    flex: 1;
    height: 100%;
    overflow-y: auto;
  }
  .week_board_left-1 {
    padding: 10px 15px 20px 15px;
  }
  .no_complete,
  .review_complete {
    padding: 5px 10px;
    margin-left: 10px;
    color: #ffffff;
    background-color: #d23b41;
    border-radius: 2px;
    font-size: 14px;
    font-weight: normal;
  }
  .review_complete {
    background-color: #7497c8;
  }
  .warn_week {
    padding: 5px 10px;
    margin-left: 10px;
    color: #ffffff;
    background-color: #7497c8;
    border-radius: 2px;
    font-size: 14px;
    font-weight: normal;
    cursor: pointer;
  }
  .warn_cui {
    padding: 5px 10px;
    margin-left: 10px;
    color: #ffffff;
    background-color: #c7bebe;
    border-radius: 2px;
    font-size: 14px;
    font-weight: normal;
  }
  .week_board_left_title {
    height: 50px;
    border-bottom: 2px solid #546478;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
  }
  .week_board_left_title-1 {
    font-size: 16px;
    font-weight: 600;
  }
  .week_board_left_title-2 {
    color: #1852a3;
    cursor: pointer;
  }
  .week_look_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    .one_week {
      display: flex;
      align-items: center;
      word-break: break-all;
      flex-wrap: wrap;
      margin-bottom: 6px;
    }
    tr {
      border: 1px solid #b5b5b5;
      line-height: 28px;
      th {
        width: 20%;
        border: 1px solid #b5b5b5;
        background-color: #f5f7fa;
        font-weight: bold;
        text-align: right;
        padding: 0px 10px;
        word-break: break-all;
      }
      td {
        border: 1px solid #b5b5b5;
        text-align: left;
        padding: 5px 10px;
        width: 80%;
        word-break: break-all;
      }
    }
    // .week_look_table_td{
    //   >div:not(:last-child) {
    //     border-bottom: 1px solid #b5b5b5;
    //   }
    // }
    .week_look_table_td:not(:last-child) {
      border-bottom: 1px solid #b5b5b5;
    }
    .attract_share_content {
      white-space: pre-line;
    }
  }
  .week_board_right_one {
    display: flex;
    flex-direction: row;
    min-height: 60px;
    cursor: pointer;
  }
  .board_right_one_name {
    font-size: 14px;
    margin: 10px 0;
  }
  .right_one_line {
    display: flex;
    width: 16px;
  }
  .board_right_one_line {
    width: 2px;
    height: 100%;
    background: #e8eaec;
  }
  .right_name1 {
    color: #0060c4;
    font-weight: bold;
    font-size: 16px;
  }
  .right_name2 {
    color: #666666;
  }
  .circel_right {
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-radius: 50%;
    border: 2px solid #1852a3;
    margin: 15px 0 0 -7px;
  }
}
.branch_dialog {
  .dialog-box_bottom {
    margin-top: 30px;
    text-align: center;
  }
}
</style>
